[Playground] feat: Add PayEmbed component playground #6493

joaquim-verges · 2025-03-18T09:15:34Z

PR-Codex overview

This PR focuses on enhancing the PayEmbed component and its configuration options, improving the user interface for payment options, and refining the theme management for better user experience.

Detailed summary

Updated ColorFormGroup to accept theme and onChange props.
Modified LeftSection to handle theme changes and payment options.
Enhanced RightSection to include wallet connection and payment methods.
Added detailed configuration for payment modes in PayEmbedPlaygroundOptions.
Improved UI elements for better user interaction and clarity.
Refined navigation links and titles for consistency and clarity.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

vercel · 2025-03-18T09:15:37Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 19, 2025 1:45am
login	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 19, 2025 1:45am
thirdweb_playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 19, 2025 1:45am
thirdweb-www	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 19, 2025 1:45am
wallet-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 19, 2025 1:45am

changeset-bot · 2025-03-18T09:15:37Z

⚠️ No Changeset found

Latest commit: b129c4a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

joaquim-verges · 2025-03-18T09:15:53Z

[Playground] feat: Add PayEmbed component playground #6493 👈 (View in Graphite)
main

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

merge-queue - adds this PR to the back of the merge queue
hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has enabled the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

apps/playground-web/src/app/connect/pay/components/CodeGen.tsx

github-actions · 2025-03-18T09:21:39Z

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
thirdweb (esm)	46.94 KB (0%)	939 ms (0%)	199 ms (+160.91% 🔺)	1.2 s
thirdweb (cjs)	127.18 KB (0%)	2.6 s (0%)	333 ms (+35.59% 🔺)	2.9 s
thirdweb (minimal + tree-shaking)	5.6 KB (0%)	113 ms (0%)	124 ms (+1234.38% 🔺)	236 ms
thirdweb/chains (tree-shaking)	506 B (0%)	10 ms (0%)	49 ms (+2289.27% 🔺)	59 ms
thirdweb/react (minimal + tree-shaking)	19.34 KB (0%)	387 ms (0%)	111 ms (+566.27% 🔺)	498 ms

codecov · 2025-03-18T09:22:00Z

Codecov Report

Attention: Patch coverage is 7.14286% with 39 lines in your changes missing coverage. Please review.

Project coverage is 54.78%. Comparing base (2d5ff74) to head (b129c4a).
Report is 2 commits behind head on main.

Files with missing lines	Patch %	Lines
...onnectWallet/screens/Buy/TransactionModeScreen.tsx	6.66%	28 Missing ⚠️
...ectWallet/screens/Buy/main/useUISelectionStates.ts	8.33%	11 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6493      +/-   ##
==========================================
- Coverage   54.82%   54.78%   -0.04%     
==========================================
  Files         875      875              
  Lines       54851    54891      +40     
  Branches     3740     3739       -1     
==========================================
+ Hits        30071    30072       +1     
- Misses      24685    24725      +40     
+ Partials       95       94       -1

Flag	Coverage Δ
packages	`54.78% <7.14%> (∅)`

Files with missing lines	Coverage Δ
...ectWallet/screens/Buy/main/useUISelectionStates.ts	`7.62% <8.33%> (-0.79%)`	⬇️
...onnectWallet/screens/Buy/TransactionModeScreen.tsx	`9.09% <6.66%> (-0.57%)`	⬇️

... and 3 files with indirect coverage changes

🚀 New features to boost your workflow:

❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

graphite-app · 2025-03-18T19:54:09Z

apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx

+            <div className="flex flex-col gap-2">
+              <Label htmlFor="modal-title">Image</Label>
+              <Input
+                id="modal-title"
+                placeholder="https://..."


The id="modal-title" attribute is duplicated on both input elements (lines 408 and 422). HTML requires unique IDs within a document to ensure proper accessibility and JavaScript functionality. Consider changing this second input to id="modal-image" to maintain uniqueness while preserving semantic meaning.

Suggested change

<div className="flex flex-col gap-2">

<Label htmlFor="modal-title">Image</Label>

<Input

id="modal-title"

placeholder="https://..."

<div className="flex flex-col gap-2">

<Label htmlFor="modal-image">Image</Label>

<Input

id="modal-image"

placeholder="https://..."

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

github-actions bot assigned joaquim-verges Mar 18, 2025

github-actions bot added Playground Changes involving the Playground codebase. packages SDK Involves changes to the thirdweb SDK labels Mar 18, 2025

joaquim-verges changed the title ~~[Playground] feat: Add PayEmbed component and playground~~ [Playground] feat: Add PayEmbed component playground Mar 18, 2025

joaquim-verges marked this pull request as ready for review March 18, 2025 09:15

joaquim-verges requested review from a team as code owners March 18, 2025 09:15

vercel bot deployed to Preview – login March 18, 2025 09:18 View deployment

vercel bot deployed to Preview – wallet-ui March 18, 2025 09:18 View deployment

graphite-app bot reviewed Mar 18, 2025

View reviewed changes

apps/playground-web/src/app/connect/pay/components/CodeGen.tsx Outdated Show resolved Hide resolved

vercel bot deployed to Preview – thirdweb_playground March 18, 2025 09:19 View deployment

vercel bot deployed to Preview – thirdweb-www March 18, 2025 09:23 View deployment

vercel bot deployed to Preview – docs-v2 March 18, 2025 09:23 View deployment

joaquim-verges force-pushed the _Playground_feat_Add_PayEmbed_component_and_playground branch from 0cf3400 to 4872581 Compare March 18, 2025 09:41

vercel bot deployed to Preview – wallet-ui March 18, 2025 09:42 View deployment

vercel bot deployed to Preview – docs-v2 March 18, 2025 09:43 View deployment

vercel bot deployed to Preview – thirdweb_playground March 18, 2025 09:44 View deployment

vercel bot deployed to Preview – login March 18, 2025 09:44 View deployment

vercel bot deployed to Preview – thirdweb-www March 18, 2025 09:48 View deployment

joaquim-verges force-pushed the _Playground_feat_Add_PayEmbed_component_and_playground branch from 4872581 to 6e27ab8 Compare March 18, 2025 19:52

vercel bot deployed to Preview – wallet-ui March 18, 2025 19:53 View deployment

graphite-app bot reviewed Mar 18, 2025

View reviewed changes

vercel bot deployed to Preview – login March 18, 2025 19:54 View deployment

vercel bot deployed to Preview – docs-v2 March 18, 2025 19:54 View deployment

vercel bot deployed to Preview – thirdweb_playground March 18, 2025 19:56 View deployment

vercel bot deployed to Preview – thirdweb-www March 18, 2025 19:58 View deployment

joaquim-verges force-pushed the _Playground_feat_Add_PayEmbed_component_and_playground branch from 6e27ab8 to 5281ce2 Compare March 19, 2025 01:26

vercel bot deployed to Preview – wallet-ui March 19, 2025 01:28 View deployment

vercel bot deployed to Preview – login March 19, 2025 01:30 View deployment

vercel bot deployed to Preview – thirdweb_playground March 19, 2025 01:30 View deployment

vercel bot deployed to Preview – docs-v2 March 19, 2025 01:33 View deployment

vercel bot deployed to Preview – thirdweb-www March 19, 2025 01:34 View deployment

[Playground] feat: Add PayEmbed component and playground

b129c4a

joaquim-verges force-pushed the _Playground_feat_Add_PayEmbed_component_and_playground branch from 5281ce2 to b129c4a Compare March 19, 2025 01:38

vercel bot deployed to Preview – wallet-ui March 19, 2025 01:39 View deployment

vercel bot deployed to Preview – login March 19, 2025 01:40 View deployment

vercel bot deployed to Preview – docs-v2 March 19, 2025 01:40 View deployment

vercel bot deployed to Preview – thirdweb_playground March 19, 2025 01:41 View deployment

joaquim-verges merged commit 56bc4ae into main Mar 19, 2025
28 of 29 checks passed

joaquim-verges deleted the _Playground_feat_Add_PayEmbed_component_and_playground branch March 19, 2025 01:43

vercel bot deployed to Preview – thirdweb-www March 19, 2025 01:45 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Playground] feat: Add PayEmbed component playground #6493

[Playground] feat: Add PayEmbed component playground #6493

Uh oh!

joaquim-verges commented Mar 18, 2025 •

edited by pr-codex bot

Loading

Uh oh!

vercel bot commented Mar 18, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Mar 18, 2025 •

edited

Loading

Uh oh!

joaquim-verges commented Mar 18, 2025

Uh oh!

Uh oh!

github-actions bot commented Mar 18, 2025 •

edited

Loading

Uh oh!

codecov bot commented Mar 18, 2025 •

edited

Loading

Uh oh!

graphite-app bot Mar 18, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

[Playground] feat: Add PayEmbed component playground #6493

[Playground] feat: Add PayEmbed component playground #6493

Uh oh!

Conversation

joaquim-verges commented Mar 18, 2025 • edited by pr-codex bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR-Codex overview

Detailed summary

Uh oh!

vercel bot commented Mar 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Mar 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

joaquim-verges commented Mar 18, 2025

How to use the Graphite Merge Queue

Uh oh!

Uh oh!

github-actions bot commented Mar 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

codecov bot commented Mar 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

graphite-app bot Mar 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

joaquim-verges commented Mar 18, 2025 •

edited by pr-codex bot

Loading

vercel bot commented Mar 18, 2025 •

edited

Loading

changeset-bot bot commented Mar 18, 2025 •

edited

Loading

github-actions bot commented Mar 18, 2025 •

edited

Loading

codecov bot commented Mar 18, 2025 •

edited

Loading